<template>
  <jke-modal
      :visible.sync="jkeForm.visible"
      :width="1200"
      :title="jkeForm.title"
      :fullscreen.sync="jkeForm.fullscreen"
      :switchFullscreen="jkeForm.switchFullscreen"
    >
    <crumbs @goBack="goBack(detailInfo)" :superiorMenu="['采购管理','采购合同','合同详情']" currentMenu="签收单详情">
    </crumbs>
    <div style="height: calc(100vh - 112px);overflow-y:scroll;overflow-x:hidden">
      <div class="uni-card">
        <div class="bd-line"></div>
        <div class="item-wrap">
          <div class="wrapLeft">
            <div class="detail-item">
            <p class="subtitle">签收编号</p>
            <p class="secondary-text">{{ detailInfo.receiptCode || '-' }}</p>
          </div>
          <div class="detail-item">
            <p class="subtitle">签收人</p>
            <p class="secondary-text">{{ detailInfo.createByText || '-' }}</p>
          </div>
          <div class="detail-item">
            <p class="subtitle">签订时间</p>
            <p class="secondary-text">{{ detailInfo.createTime || '-' }}</p>
          </div>
          <div class="detail-item">
            <p class="subtitle">合同单号</p>
            <p class="secondary-text">{{ detailInfo.contractIdText || '-' }}</p>
          </div>
          <div class="detail-item">
            <p class="subtitle">签收商品种类</p>
            <p class="secondary-text">{{ detailInfo.receiptGoodsType || '-' }}</p>
          </div>
          <div class="detail-item">
            <p class="subtitle">总签收件数</p>
            <p class="secondary-text">{{ detailInfo.receiptNum || '-' }}</p>
          </div>
          <div class="detail-item" style="width:100%">
            <p class="subtitle">签收备注</p>
            <p class="secondary-text">{{ detailInfo.remark || '-' }}</p>
          </div>
          <!-- <div class="detail-item"/>
        <div class="detail-item"/> -->
          <div class="detail-item" style="width:100%">
            <p class="subtitle">签收图片</p>
            <img v-if="this.imageUri" :src="apiBaseUrlDownload + this.imageUri" alt="" class="imgClass" />
          </div>
          </div>
 

          <div class="wrapRight">
          <flow-status :formStatusText="detailInfo.flowStatusText" :flowStatus="detailInfo.flowStatus" title="签收状态">
          </flow-status>
        </div>
        </div>
      </div>
      <a-card title="签收明细" :bordered="false" style="margin-top: 12px;">
        <a-table row-key="id" size="middle" :scroll="{ x: '100%' }" :hideDefaultSelections="false" :columns="orderColumns"
          :dataSource="detailInfo.erpPurchaseSignOrderItemVoList" :pagination="false">
          <span slot="signNum" :title="numFormat(text)" slot-scope="text">{{ numFormat(text) }}</span>
        </a-table>
      </a-card>
      <!-- <div class="cards-box">
      </div> -->
      <div v-if="detailInfo.flowInstId" style="padding: 12px">
        <Examine  type="2" :id="detailInfo.flowInstId" ref="examine" />
      </div>
    </div>
  </jke-modal>
</template>
<script>
import crumbs from '@/components/crumbs.vue'
import { getFileListByIds } from '@/api/api'
import { apiBaseUrlDownload } from '@/utils/request'
import { API } from '@/api/requestFzs'
import { fourFloatNum, numFormat } from '@/utils/util'
import Examine from '@/components/examine'
import FlowStatus from '@/pubComponent/FlowStatus'
export default {
  data() {
    const orderColumns = [
      {
        title: '物品编号',
        dataIndex: 'goodsName',
        ellipsis: true,
        width: '25%',
      },
      {
        title: '物品名称',
        dataIndex: 'goodsCode',
        ellipsis: true,
        width: '25%',
      },
      {
        title: '规格',
        dataIndex: 'spec',
        ellipsis: true,
        width: '25%',
      },
      {
        title: '本次签收数量',
        dataIndex: 'signNum',
        ellipsis: true,
        width: '25%',
        scopedSlots: { customRender: 'signNum' },
      },
    ]
    return {
      jkeForm: {
        title: '签收单详情',
        visible: false,
        fullscreen: true,
        switchFullscreen: true,
      },
      numFormat,
      apiBaseUrlDownload,
      detailInfo: {},
      activeKey: '1',
      selectedRows: [],
      selectedRowKeys: [],
      orderColumns: orderColumns, // 订单columns
      loadingSubmit: false,
      imageUri: '',
    }
  },
  components: {
    crumbs,
    Examine,
    FlowStatus
  },
  methods: {
    /* 列表选择 */
    onSelectChange(selectedRowKeys, selectedRows) {
      this.selectedRowKeys = selectedRowKeys
      this.selectedRows = selectedRows
    },
    /* 切tab */
    callback(i) {
      this.activeKey = i
    },
    /* 面包屑返回 */
    goBack() {
      this.jkeForm.visible = false
    },
    initDetail(id) {
      this.jkeForm.visible = true
      API.erpPurchaseSignOrderQueryById({ id }).then((res) => {
        if (res.code == 200) {
          this.detailInfo = res.result
          getFileListByIds({ ids: res.result.attachment.split(',')[0] }).then((file) => {
            if (file.code == 200) {
              this.imageUri = file.result[0].uri || ''
            }
          })
        }
      })
    },
    handleSubmit() {
      if (this.selectedRows.length == 0) {
        this.$antdMessage.info('请先选择数据')
        return
      }
      for (let i = 0; i < this.selectedRows.length; i++) {
        const row = this.selectedRows[i]
        if (!row.num) {
          this.$antdMessage.error('计划生产数量必填')
          return
        }
      }
      alert('submit')
    },
  },
}
</script>
<style scoped lang="less">
@import '~@/assets/less/public.less';
.item-wrap {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;

  .wrapLeft {
    flex: 1;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    .detail-item:nth-of-type(n + 4) {
  margin-top: 40px;
}
.detail-item {
  width: 33%;
}
  }
  .wrapRight {
    width: 116px;
    .detail-item {
      .subtitle {
        text-align: right;
      }
      .secondary-text {
        text-align: right;
      }
    }
  }
}

.uni-card {
  padding: 24px 40px;
  margin: -12px -12px 0;
  background: #fff;
}
.bd-line {
  height: 1px;
  background: @greyBorder;
  margin: -12px -40px 24px -40px;
}
.cards-box {
  height: calc(100% - 514px);
  padding-bottom: 12px;
  margin-top: 12px;
  background: #fff;
}
.table-wrap {
  height: calc(100% - 69px);
  background: #fff;
  padding: 24px;
  margin: 0 12px;
}
.form-footer {
  margin: 12px -12px 0 -12px;
}
.imgClass {
  width: 60px;
  height: 60px;
  border-radius: 6px;
}
</style>
